<html>

<head>
    <title>HTML 文档结构</title>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
    <!-- <center>
            <font color=”red ”>Welcome to Web Site</font>
        </center> 
        -->

    <div class="main">
        <div class="row">
            <input class="input" type="text" id="inputtext" onkeypress="keyup(event)" />
            <input type="button" name="bt" value="添加" onclick="handleClick(event)" />
        </div>
        <div id="todogroup" ></div>
        <div class="sogood">
            <button onclick="checkAll()">全选</button>
            <button onclick="checkNo()">全不选</button>
            <button onclick="checkReverse()">反选</button>
            <button onclick="checkDelete()">删除所选</button>
        </div>
        <!-- <div id='xx' onmouseenter="enter('xx')" onmouseleave="leave('xx')">dgaldh</div> -->
    </div>
</body>
<script lang="javascript">
    var intCnt = 0;

    function init() {
        // setTimeout(function(){
        //     alter("hhh");
        // },2000)
        console.log("xxx");
        //document.getElementById("button2").onclick = handleClick;
    }
    function getValue() {
        var temp = document.getElementById("inputtext");
        console.log(temp.value);
        return temp.value;
    }

    function keyup(e) {
        console.log(e);
        if (e.key == "Enter") {
            handleClick(e);
        }
    }

    console.log('xxxx');
    function handleClick(e) {
        console.log('handleClike');
        console.log(e);
        // var temp=document.getElementsByName("bt");
        // console.log(temp);
        // var temp=document.getElementById("inputtext");
        // console.log(temp.value);
        // document.getElementsByClassName("main")[0].style="background-color:#333333";
        // document.getElementById("todogroup").innerHTML += "<div>" + getValue() + "</div>";
        // var div = document.createElement('div');
        // div.innerText = temp;
        var temp=getValue();
        if(temp==""){
            alert("输入的事件能为空!");
            return;
        }
        document.getElementById("todogroup").innerHTML += "<div class='item' id='todo"
            + intCnt + "'><input type='checkbox' name='todocheck' ><div class='item-value'>"
            + temp + "</div><button class='item-del' type='button' onclick='deletByIndex("
            + intCnt + ")'>删除</button></div>";
        document.getElementById("inputtext").value = "";
        intCnt++;
    }
    function checkAll() {
        var hobbys = document.getElementsByName("todocheck");
        for (var i = 0; i < hobbys.length; i++) {
            hobbys[i].checked = true;
        }

    }

    function checkNo() {
        var hobbys = document.getElementsByName("todocheck");
        for (var i = 0; i < hobbys.length; i++) {
            hobbys[i].checked = false;
        }
    }

    function checkReverse() {
        var hobbys = document.getElementsByName("todocheck");
        for (var i = 0; i < hobbys.length; i++) {
            hobbys[i].checked = !hobbys[i].checked;
        }
    }
    function checkDelete() {
        var hobbys = document.getElementsByName("todocheck");
        console.log(hobbys);
        var c = [];
        for (var i = 0; i < hobbys.length; i++) {
            if (hobbys[i].checked == true) {
                c[c.length] = hobbys[i].parentElement.id;
            }
        }
        for (var i = 0; i < c.length; i++) {
            document.getElementById(c[i]).remove();
        }
    }
    function deletByIndex(index) {
        document.getElementById("todo" + index).remove();
    }
    // function event(id){
    //     document.getElementById("id").style='background-color:#ffffff';
    // }

    // function enter(id){
    //     document.getElementById("id").style='background-color:#';
    // }
    // function leave(id){
    //     document.getElementById("id").style='background-color:';
    // }
    init();
</script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main {
        /* background-color: aqua;
        height: 200px; */
        padding: 8px;
        border: 1px solid #333333;
        border-radius: 8px;
        box-shadow: 0px 0px 10px #003ef9;
       
    }

    .row {
        display: flex;
        padding:8px;
    }

    .item {
        display: flex;
        align-items: center;
        margin: 6px;
        padding: 3px;
        border-radius: 3px;
        background-color: #ffffff;
    }

    .item:hover {
        background-color: #a1a1a1;
    }

    .item-value {
        flex-grow: 1;
        color: #000000;
    }

    .item-del {
        color: aliceblue;
        background-color: red;
        border: 0px;
        opacity: 0;
        /* background-color: rgba(red, green, blue, alpha); */
    }

    .item:hover .item-del {
        opacity: 1;
    }

    .input {
        padding: 8px;
        outline: none;
    }

    .input:focus {
        box-shadow: 0px 0px 10px #003ffb;
        border: 2px solid #0040ff;
    }

    .sogood {
        padding: 8px;
    }
</style>

</html>